<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">

    <el-input
            size="small"
            placeholder="请输入姓名"
            suffix-icon="el-icon-date"
            style="display: inline-block;width: 200px;"
            v-model="searchInfo.name"
    >
    </el-input>

    <el-input
            size="small"
            placeholder="请输入最小年龄"
            suffix-icon="el-icon-date"
            style="display: inline-block;width: 200px;"
            v-model="searchInfo.minAge"
    >
    </el-input>

    <el-input
            size="small"
            placeholder="请输入最大年龄"
            suffix-icon="el-icon-date"
            style="display: inline-block;width: 200px;"
            v-model="searchInfo.maxAge"
    >
    </el-input>

    <el-input
            size="small"
            placeholder="请输入性别"
            suffix-icon="el-icon-date"
            style="display: inline-block;width: 200px;"
            v-model="searchInfo.sex"
    >
    </el-input>
    <el-button type="primary" @click="searchPatient()">搜索</el-button>
    <el-button type="info" @click="writeout()">导出</el-button>

    <template>
        <el-table
                :data="dataArr"
                style="width: 100%">

            <el-table-column
                    prop="id"
                    label="编号"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="姓名"
                    width="130">
            </el-table-column>

            <el-table-column
                    prop="age"
                    label="年龄"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="dname"
                    label="诊断医师"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="kname"
                    label="诊断科室"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="text"
                    label="我的病情"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="proposal"
                    label="医生建议"
                    width="200">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="danger" @click="remove(scope.row.id)">删除记录</el-button>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

</div>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            searchInfo:{},
            dataArr:[],
            totalCount:0
        },
        methods:{
            writeout(){
               window.location.href = "/ssm/export/download?name="+haha.searchInfo.name + "&minAge=" + haha.searchInfo.minAge + "&maxAge=" + haha.searchInfo.maxAge + "&sex=" + haha.searchInfo.sex + "&pageNo=1&pageCount=5000";
            },
            remove(id){
                $.get("/ssm/patient/remove/"+id,function (backData) {
                    if( backData.code == 1 ){
                        haha.$message.success('删除成功');
                        getData(1,10);
                    }else {
                        haha.$message.error('删除失败');
                        getData(1,10);
                    }
                })
            },
            searchPatient(){
                getData(1,10);
            },
            handleCurrentChange(val){
                getData(val,10);
            }
        }
    });

    function getData(a,b) {
        haha.searchInfo.pageNo = a;
        haha.searchInfo.pageCount = b;
        $.post("/ssm/patient/queryAll",haha.searchInfo,function (backData) {
            haha.dataArr = backData.data.jianyiData;
            haha.totalCount = backData.data.patientCount;
        })

    }
    getData(1,10);

</script>

</body>
</html>